<template>
    <div class="barWrap" ref="linebox" ></div>
</template>

<script>
import echarts from '../../utils/echarts'

export default {
  data() {
    return {
        optionSet: {
        // color: ['#f77c82'],
        //   title: {
        //     text: this.title+'数量统计',
        //     subtext: '',
        //     left: 'left',
        //     color: '#999'
        // },
        textStyle: {
            color: '#999'
        },
        grid: {
            show: false,
            containLabel: false,
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'cross'
            },
            backgroundColor: 'rgba(245, 245, 245, 0.8)',
            borderWidth: 1,
            borderColor: '#ccc',
            padding: 10,
            textStyle: {
                color: '#333'
            },
            formatter: function (params) {
                // return 444
                // console.log(params)
                return params[0].name + '<br>金额: ' + params[0].data;
            }
        },
        itemStyle: {
                color: new echarts.graphic.LinearGradient(
                    0, 0, 0, 1,
                    [
                        {offset: 0, color: '#188df0'},
                        {offset: 0.5, color: '#188df0'},
                        {offset: 1, color: '#83bff6'}
                    ]
                ),
                barWidth: 15,
                //柱形图圆角，初始化效果
                barBorderRadius:[40, 40, 10, 10],
            },
            emphasis: {
                itemStyle: {
                    color: new echarts.graphic.LinearGradient(
                        0, 0, 0, 1,
                        [
                            {offset: 0, color: '#2378f7'},
                            {offset: 0.7, color: '#2378f7'},
                            {offset: 1, color: '#83bff6'}
                        ]
                    )
                }
            },
        xAxis: {
            // type: 'category',
            axisTick: {
                show: false
            },
            axisLine: {
                show: false
            },
            axisLabel: {
              show: true, // 默认为true
              interval: 0, // 设置x轴文本标签全部显示
              rotate: 45, //标签旋转角度，对于长文本标签设置旋转可避免文本重叠
              //   formatter: function (params) {
              //     return 444 + params
              // }
            },
            data: [],
            // data: [
            //     'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun',
            //     'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun',
            //     'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun',
            //     'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'
            // ]
        },
        yAxis: {
            type: 'value',
            axisTick: {
                show: false
            },
            axisLine: {
                show: false
            }, // Y轴消失
            // data: ['100', '300', '500', '9000']
        },
        series: {
            name: this.title,
            data: [],
            type: 'line',
            areaStyle: {},
            smooth: true,
        }
      }
    };
  },
  computed: {
    xLine () {
      return this.dataList.xLine
    },
    yLine () {
        return this.dataList.yLine
    }
  },
  props: {
    dataList: {
      type: Object,
      detail: {
          xLine:[],
          yLine:[]
      }
    },
    title: {
      type: String,
      detail: ""
    },
    linebox: {
      type: String,
      detail: ""
    },
    selectKey: {
      type: String,
      detail: ''
    }
  },
  mounted() {
    //   console.log(999)
    if (this.xLine && (this.xLine.length>0)) {
        this.canvasAction()
    }
  },
  beforeDestroy(){
    //   console.log(1111)
    //   echarts.init(this.$refs.linebox).clear()
  },
  methods: {
      canvasAction(){
        let that = this
        this.optionSet.xAxis.data = this.xLine
        this.optionSet.series.data = this.yLine
        echarts.init(this.$refs.linebox).clear()
        let myChart = echarts.init(this.$refs.linebox)
        myChart.setOption(this.optionSet)
        // window.onresize = myChart.resize;
        window.addEventListener('resize', () => {
          myChart.resize()
        })
        myChart.off('click')
        myChart.on('click', function (params) {
          that.$emit("lineAction", params.name)
      });
      }
  },
  watch: {
    xLine: function() {
        // console.log(a, 777)
        // echarts.init(this.$refs.linebox).clear()
        this.canvasAction()
    }
  }
};
</script>

<style lang="less" scoped>
   .barWrap{
       width: calc(100vw - 360px);
       height: 320px;
   }
</style>